<template>
    <div>
        <h1>登录页面</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>登录名称</td>
                    <td><input type="text" v-model="ab.username" /></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" v-model="ab.userpwd" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="登录" @click="login" /></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
let ab = reactive({
    username: '',
    userpwd: ''
})

const login = () => {
    if (ab.username == "") {
        alert("登录名不能为空");
        return;
    }
    if (ab.userpwd == "") {
        alert("密码不能为空");
        return;
    }
    console.log(ab);
}

</script>

<style scoped></style>